import React, {createRef, useEffect} from 'react';
import {BrowserRouter, HashRouter} from 'react-router-dom'
import AppRouter from "../../router"
import MusicPlayer from "../../components/musicPlayer/MusicPlayer";
import styled, {ThemeProvider} from "styled-components";
import SideMenu from "./components/SideMenu/SideMenu";
import Top from './components/Top/Top'
import {GlobalStyled, GlobalFont, MainTheme} from '../../assets/style/globalStyled'
import {AppContainer,AppMain} from './style/APP.css'
import Background from "./components/Background/background";
import MusicList from "../../components/musicPlayer/components/MusicList";
import {Provider} from "react-redux";
import {store} from "../../redux/store";


function App(props) {
    let re = createRef()

    useEffect(()=>{

    })
    useEffect(()=>{
        window.niskyMusicPlayer = re.current;
    },[re])

    return (
        <Provider store={store}>
            <BrowserRouter>
                <GlobalStyled/>
                <GlobalFont/>
                <ThemeProvider theme={MainTheme}>
                    <AppContainer>
                        <Background/>
                        <AppMain>
                            <div className={"leftSide"}>
                                <SideMenu/>
                            </div>
                            <div className={"rightSide"}>
                                <div className={"head"}>
                                    <Top/>
                                </div>
                                <div className={"body"}>
                                    <AppRouter />
                                </div>
                                <div className={"foot"} id={"MP"}>
                                    {/*{niskyMusicPlayer}*/}
                                    {/*{console.dir(niskyMusicPlayer)}*/}
                                    {/*<div id={"MusicPlayerContainer"} style={{height:"100%"}}/>*/}
                                    <MusicPlayer ref={re}/>
                                </div>
                            </div>
                            {
                                re.current && <MusicList musicPlayer={re.current}/>
                            }

                        </AppMain>
                    </AppContainer>

                </ThemeProvider>

            </BrowserRouter>
        </Provider>

    );
}

export default  App;